<template>
  <div class="kjk">
    <a-typography-title :level="4" class="header">
      <img
        src="@/assets/left-s-line.png"
        class="left-s-line"
        @click="handleAvatarClick"
      />
      新建需求
    </a-typography-title>
    <div class="pad">
      <van-field
        v-model="description"
        rows="4"
        autosize
        type="textarea"
        placeholder="填写产品描述"
        maxlength="200"
        show-word-limit
      />
      <van-divider />
      <van-uploader
        v-model="fileList"
        multiple
        :before-read="beforeRead"
        :max-count="3"
        :after-read="afterRead"
        accept="image/*"
        @delete="deleteRead"
      />
      <div class="haskd">最多上传3张图片</div>
    </div>

    <van-button type="default" block class="add" @click="submit">
      确认提交</van-button
    >
  </div>
</template>
      
<script setup >
import { addFeedback, updateFeedback, commonUpload } from '@/api/api'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
const router = useRouter()
const description = ref('')
const fileList = ref([])
const feedbackPhoto = ref([])

onMounted(() => {
  fileList.value = []
})
const handleAvatarClick = () => {
  router.push({ path: '/needs' })
}

const beforeRead = (file, detail) => {
  if (file instanceof Array && file.length) {
    Toast.fail('每次只能上传一张图片')
    return
  } else {
    return true
  }
}

const afterRead = (file) => {
  var formData = new FormData()
  formData.append('file', file.file)
  commonUpload(formData)
    .then((res) => {
      if (res.code == 200) {
        feedbackPhoto.value.push(res.url)
      } else {
        // 上传失败处理
        Toast.fail('图片上传失败')
        // 清除失败的图片
        fileList.value = fileList.value.filter(
          (item) => item.file !== file.file
        )
      }
    })
    .catch(() => {
      // 网络错误处理
      Toast.fail('网络错误，上传失败')
      fileList.value = fileList.value.filter((item) => item.file !== file.file)
    })
}
const deleteRead = (file, detail) => {
  feedbackPhoto.value.forEach((item, index, arr) => {
    if (index == detail.index) {
      arr.splice(index, 1)
    }
  })
}
const submit = () => {
  console.log('description: ', fileList.value, description.value)
  if (description.value === '') {
    Toast.fail('请填写产品描述')
    return
  }
  let userInfo = JSON.parse(localStorage.getItem('userInfo'))
  addFeedback({
    memberId: userInfo?.id,
    feedbackContent: description.value,
    feedbackPhoto: feedbackPhoto.value.join(),
  }).then((res) => {
    if (res.code == 200) {
      Toast.success('提交成功')
      router.push({ path: '/needs' })
    } else {
      Toast.fail(res.msg)
    }
  })
}
</script>
      
<style scoped lang='less'>
.kjk {
  .header {
    text-align: center;
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid #ccc;

    .left-s-line {
      width: 20px;
      position: absolute;
      left: 10px;
      top: 15px;
    }
  }
  .pad {
    padding: 10px;
  }
  .add {
    width: 90%;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    height: 48px;
    background: #3c7058;
    border-radius: 24px;
    color: #fff;
  }
  .haskd {
    font-size: 12px;
  }
}
</style>